import type { CSSProperties } from 'react';
import React, { useMemo } from 'react';
import { useModel } from 'umi';

import type { PageSettingValue } from '..';

import styles from './index.less';

interface IPageSettingViewProps extends React.PropsWithChildren {
  data: PageSettingValue;
}

const PageSettingView: React.FunctionComponent<IPageSettingViewProps> = (props) => {
  const { data } = props;
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState || {};
  // 是否沉浸模式
  const isImmersion = data.navType === 'immersion';
  const headerHeight = isImmersion ? 0 : 88;

  const bg = useMemo(() => {
    const res = {
      class: styles['bg-sharp'],
      style: {
        '--height': `${headerHeight}px`,
        backgroundColor: data.bgColor,
      } as CSSProperties,
    };

    // 默认模板
    if (data.tplType === 'normal' && data.bgType === 'gradient') {
      res.style = {
        '--height': `${headerHeight}px`,
        background: `linear-gradient(to bottom, ${data.bgColorRange[0]}, ${data.bgColorRange[1]})`,
      } as CSSProperties;
    }
    if (data.tplType === 'normal' && data.bgType === 'image') {
      res.style = {
        '--height': `${headerHeight}px`,
        backgroundImage: `url(${imgPrefix}${data.bgImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'contain',
        backgroundColor: data.bgColor,
      } as CSSProperties;
    }
    if (data.tplType === 'normal' && data.bgType === 'color') {
      res.style = {
        '--height': `${headerHeight}px`,
        backgroundColor: data.bgColor,
      } as CSSProperties;
    }
    // 圆弧
    if (data.tplType === 'arc') {
      res.class = `${res.class} ${styles.arc}`;
      res.style['--color'] = data.navBgColor;
    }
    // 圆角
    if (data.tplType === 'roundedEdges') {
      res.class = `${res.class} ${styles.roundedEdges}`;
      res.style = {
        '--height': `${headerHeight}px`,
        backgroundColor: data.navBgColor,
        '--color': data.bgColor,
      } as CSSProperties;
    }
    // 导航色下沉
    if (data.tplType === 'sink') {
      res.class = `${res.class} ${styles.sink}`;
      res.style = {
        '--height': `${headerHeight}px`,
        backgroundColor: data.navBgColor,
        '--color': data.bgColor,
      } as CSSProperties;
    }
    return res;
  }, [
    data.navType,
    data.tplType,
    data.bgColor,
    data.bgColorRange,
    data.navBgColor,
    data.bgImage,
    data.bgType,
  ]);

  return (
    <div
      className={styles.container}
      style={
        {
          '--height': `${headerHeight}px`,
          '--paddingTop': `${headerHeight / 2}px`,
          '--innerHeight': `${isImmersion ? 88 : 0}px`,
        } as CSSProperties
      }
    >
      <div className={styles['container-bg']}>
        <div
          className={styles['bg-title']}
          style={{
            backgroundColor: data.navBgColor,
          }}
        >
          {data.title}
        </div>
        <div className={bg.class} style={bg.style} />
      </div>
      <div className={styles['container-preview']}>{props.children}</div>
    </div>
  );
};

export default PageSettingView;
